import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import type { Argument } from 'classnames';
import type { CSSProperties } from 'react';
import { useThemeChange } from '@/hooks/useThemeChange';

const TjIcon: React.FC<ITjIconProps> = (props) => {
  const { theme } = useThemeChange();

  const buildImg = () => {
    if (theme === 'gre') {
      return props.gre;
    } else if (theme === 'dark') {
      return props.dark;
    } else {
      return props.light || props.dark;
    }
  };

  useEffect(() => {
    buildImg();
  }, [theme]);

  return (
    <img
      src={buildImg()}
      style={props.style}
      className={classNames(props.className)}
      onClick={props.onClick}
    />
  );
};

interface ITjIconProps {
  /**
   * 支持传入行内样式
   */
  style?: CSSProperties;
  /**
   * class
   * 不管传没传，都会有一个 `tj-content` 的 className
   */
  className?: Argument;
  gre: string;
  dark: string;
  light?: string;
  onClick?: () => void;
}

export { TjIcon };
